<template>
  
    <div class="iot_hotpanel">
        <div class="iot_container">
            <div v-for="item in HomeCommendList" :key="item.id" class="iot_item">
                <router-link :to="{ path: '/recommend' }" class="iot_card">
                    <div class="iot_title">
                        <h3 class="iot_title1">{{ item.title }}</h3>
                        <span class="iot_title2">{{ item.alt }}</span>
                    </div>
          

                    <div class="iot_image">
                        <img v-for="src in item.pictures" :key="src"
                            class="iot_imgs left-img"
                            :src="src"
                            alt="商品图片1"
                        />
                       
            
                    </div>
                </router-link>
            </div>
        </div>
    </div>
  
</template>

<style scoped>
.iot_hotpanel {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 16px; 
  
}

.iot_container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 3px; 
}

.iot_item {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.iot_card {
  display: block;
  text-decoration: none; 
  color: inherit;        
}

.iot_title {
  display: flex;
  padding: 12px 16px;

}

.iot_title1 {
  font-size: 18px;
  color: #6a6868; 
  margin-bottom: 4px;
}

.iot_title2 {
  font-size: 12px;
  color: #999;
  margin-top: 7px;
  margin-left: 3px;
}


.iot_image{
  display: flex;
  justify-content: space-between;
  height: 50px;
  padding: 0 16px 16px;
}

.iot_imgs {
  width: calc(50% - 1px); /* 宽度各占一半减去半个gap值 */
  object-fit: cover; 
  height: 50px;
}


</style>

<script setup>
import { getHomeCommendAPI } from '@/apis/homerecommend';
import {ref,onMounted} from 'vue';

const HomeCommendList=ref([])

const getHomeCommend=async()=>{
    const res=await getHomeCommendAPI()
    HomeCommendList.value=res.result
}

onMounted(()=>getHomeCommend())
</script>